	<template>
		<scroll-view scroll-y="true">
			<view class="header">
				<image class="search-catetory" src="../../static/jdimages/category.png" mode="widthFix"></image>
				<uni-search-bar class="search-input" placeholder="请输入你要搜索的关键字" radius="20" clearButton="none"
					cancelButton="none" bgColor="#FFF">
				</uni-search-bar>
				<image class="search-user" src="../../static/jdimages/user.png" mode="widthFix"></image>
			</view>


			<view class="nav">
				<uni-swiper-dot :info="info" style="border-radius: 15px;" :current="current" class="nav-swiper"
					:dots-styles="dotsStyles">
					<swiper @change="change" class="nav-swiper-item">
						<swiper-item>
							<uni-grid :column="5" class="nav-grid" :square="false" :showBorder="false">
								<uni-grid-item class="nav-item" v-for="(item, index) in subItems" :index="index"
									:key="index">
									<view class="nav-content">
										<image :src="item.imageUrl" style="width: 2.5rem;" mode="widthFix"></image>
										<text>{{item.title}}</text>
									</view>

								</uni-grid-item>
							</uni-grid>
						</swiper-item>

						<swiper-item>
							<uni-grid :column="5" class="nav-grid" :square="false" :showBorder="false">
								<uni-grid-item class="nav-item" v-for="(item, index) in subItems2" :index="index"
									:key="index">
									<view class="nav-content">
										<image :src="item.imageUrl" style="width: 2.5rem;" mode="widthFix"></image>
										<text>{{item.title}}</text>
									</view>

								</uni-grid-item>
							</uni-grid>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>


			</view>



			<view class="activity">
				<!-- #ifdef H5 -->
				<view class="activity"
					style="background-image: url('../../static/jdimages/activity.png'); background-size: cover;border-radius: 12px;">
				</view>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<image class="activity-background" src="../../static/jdimages/activity.png" mode="widthFix"></image>
				<!-- #endif -->

				<view class="activity-left">
					左侧内容
				</view>
				<scroll-view show-scrollbar="false" scroll-x="true" class="activity-right" style="border-radius: 15px;">
					<view class="activity-item" v-for="(item,index) in activityItems" :key="index" :index="index">
						<view class="activity-item-content">
							<image :src="item.imageUrl" style="width: 3rem;" mode="widthFix"></image>
							<text>{{item.price|getPrice}}</text>
						</view>
					</view>
				</scroll-view>

			</view>



			<!-- <view class="goods-cantainer"> -->
			<!-- 基于 uni-list 的页面布局 -->
			<uni-list class="goods-list" style="flex-wrap: wrap;background-color:#f6f6f6; " :border="false" >
				<!-- to 属性携带参数跳转详情页面，当前只为参考 -->
				
				<!-- #ifdef MP-WEIXIN -->
				<uni-list-item  to="/pages/product/detail" :border="false" direction="row" :customStyle="{backgroundColor:'#fff;border-radius:10px;',padding: ''}" class="goods-list-item" style="width: 45%; border-radius:10px;padding: .5rem;"
					 v-for="item in goods" :key="item._id">
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<uni-list-item  to="/pages/product/detail" :border="false" direction="row"  class="goods-list-item" style="width: 45%; border-radius:10px;margin:.5rem;padding: .5rem;"
					 v-for="item in goods" :key="item._id">
				<!-- #endif -->
				
					<template v-slot:body>
						<view class="slot-box">
							<image :src="item.imgprefix+item.imgbase" style="width: 5rem;" mode="widthFix"></image>
							<text style="text-overflow: ellipsis;     line-height: 1.05rem;    height: 1.1rem;">{{item.name}}</text>
						</view>
					</template>
				</uni-list-item>
			</uni-list>

			<!-- </view> -->


		</scroll-view>
	</template>

	<script>
		// #ifdef MP-WEIXIN
		import activityData from '../../static/json/index-activity.json'
		import goodsItems from '../../static/json/goods.json'
		// #endif




		export default {
			data() {
				return {
					keyWord: undefined,
					info: [{
							colorClass: 'uni-bg-red',
							url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
							content: '内容 A'
						},
						{
							colorClass: 'uni-bg-green',
							url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
							content: '内容 B'
						}
					],
					subItems: [{
							title: "京东超市",
							imageUrl: "../../static/jdimages/navigator/item_1.png",
						}, {
							title: "京东电器",
							imageUrl: "../../static/jdimages/navigator/item_2.png",
						},
						{
							title: "服饰美妆",
							imageUrl: "../../static/jdimages/navigator/item_3.png",
						},
						{
							title: "充值中心",
							imageUrl: "../../static/jdimages/navigator/item_4.png",
						},
						{
							title: "PLUS会员",
							imageUrl: "../../static/jdimages/navigator/item_5.png",
						}

					],
					subItems2: [{
							title: "京东生鲜",
							imageUrl: "../../static/jdimages/navigator/item_6.png",
						},
						{
							title: "京东国际",
							imageUrl: "../../static/jdimages/navigator/item_7.png",
						},
						{
							title: "京东拍卖",
							imageUrl: "../../static/jdimages/navigator/item_8.png",
						},
						{
							title: "拍拍二手",
							imageUrl: "../../static/jdimages/navigator/item_9.png",
						},
						{
							title: "全部",
							imageUrl: "../../static/jdimages/navigator/item_10.png",
						}
					],
					activityItems: [],
					goods: [],
					dotsStyles: {
						backgroundColor: 'rgba(255, 90, 95,0.3)',
						border: '1px rgba(255, 90, 95,0.3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
						selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
					},
					current: 0,
				}
			},
			filters: {
				getPrice(source) {
					return "￥" + source;
				}
			},
			onLoad() {
				this.loadActivity()
				this.loadGoods()
			},
			methods: {
				change(e) {
					this.current = e.detail.current
				},
				loadActivity() {
					let that = this;
					// #ifdef MP-WEIXIN
					// debugger
					that.activityItems = activityData
					// #endif
					// #ifdef H5
					uni.request({
						url: "/static/json/index-activity.json",
						success(res) {
							for (let item of res.data) {
								that.activityItems.push(item)
							}

						}
					})
					// #endif

				},
				loadGoods() {
					let that = this;
					// #ifdef MP-WEIXIN
					// debugger
					that.goods = goodsItems
					// #endif
					// #ifdef H5
					uni.request({
						url: "/static/json/goods.json",
						success(res) {
							for (let item of res.data) {
								that.goods.push(item)
							}

						}
					})
					// #endif

				}
			}
		}
	</script>

	<style>
		body {
			background-color: #f4f4f4;
		}

		* {
			cursor: pointer !important;
		}


		.header {
			background-color: #ff5454;
			display: flex;
			align-items: center;
			padding: 0 10rpx;
		}

		.header .search-catetory,
		.header .search-user {
			flex: 0.13;
		}

		.header .search-input {
			flex: 2;
		}

		.nav {
			background: linear-gradient(180deg, #ff5454 .63%, #f4f4f4 80.65%);
			padding: .3rem .5rem;
		}

		.nav .nav-swiper {
			background-color: #FFF;
		}


		.nav-swiper-item {
			height: 100px;
			/* #ifdef MP-WEIXIN */
			background-color: #FFF;
			border-radius: 15px;
			/* #endif */
		}

		.nav-grid {
			padding: 0.6rem 0.2rem;
		}

		.nav-item {
			text-align: center;
		}

		.nav-item .nav-content {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}


		.activity {
			display: flex;
			align-items: center;
			padding: .1rem .05rem;
			margin: .3rem .5rem;
			text-align: center;
			overflow: hidden;
			position: relative;

			/* #ifdef H5 */
			width: 97%;
			height: 100px;
			margin: .3rem .2rem;

			/* #endif */
		}


		.activity .activity-background {
			width: 100%;
			height: 100%;
			border-radius: inherit;
			/* 继承父容器的圆角 */
			object-fit: cover;
			/* 覆盖整个容器 */
			z-index: -1;
			/* 确保内容覆盖在图片上 */
		}


		.activity .activity-left {
			position: absolute;
			z-index: 1;
			width: 20%;
			height: 100px;
			line-height: 100px;
		}

		.activity .activity-right {
			position: absolute;
			z-index: 1;

			/* #ifdef H5 */
			left: 18%;
			width: 80%;
			height: 100px;
			/* #endif */
			/* #ifndef H5 */
			left: 20%;
			width: 79.5%;
			height: 96px;
			/* #endif */

			background-color: #FFF;
			white-space: nowrap;
		}

		.activity .activity-right .activity-item {
			display: inline-block;
			/* #ifdef MP-WEIXIN */
			padding: 1rem .2rem;
			/* #endif */
			/* #ifndef MP-WEIXIN */
			padding: 1rem .5rem;
			/* #endif */
		}

		.activity-item-content {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}

		.activity .activity-right .activity-item .activity-item-content text {
			font-size: 20 px;

		}


		/* 针对Web平台 */
		.activity-right div::-webkit-scrollbar {
			display: none;
			/* 隐藏滚动条 */
		}

		/* 针对其他平台，比如微信小程序，可能需要不同的样式设置 */
		.activity-right div {
			scrollbar-width: none;
			/* 对于微信小程序 */
			-ms-overflow-style: none;
		}

		.goods-list {
			flex-direction: row;
			padding: .3rem;
		}

		.goods-list-item {
			width: 40%;
			flex: 1;
			/* height: 100px; */
			/* background-color: #00aa00; */
			flex-wrap: wrap;
			border-radius: 10 px;
		}

		.slot-box {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
		
		
		.uni-list {
		  display: flex;
		  flex-wrap: wrap;
		  justify-content: space-between;
		  background-color: #f4f4f4 !important;
		}
		 
		.uni-list-item {
		
		  box-sizing: border-box;
		}
	</style>